<template>
    <div id="modifyPwdDiv">
        <!-- :rules 表单验证规则 -->
        <el-form ref="form" :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
            <el-form-item label="原密码" prop="password">
                <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input type="password" v-model="form.newPassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPassword">
                <el-input type="password" v-model="form.checkPassword" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form-item>
              <el-button  @click="doRest">重置</el-button>
              <el-button type="danger" @click = "doSubmit">提交</el-button>
        </el-form-item>
    </div>
</template>

<script>
import {mapState} from "vuex";
export default {
  name: "ModifyPwd",
  data() {
    const validateNewPassword2 = (rule, value, callback) =>{
            // 条件成立：两次输入的密码不一致
            if(this.form.newPassword != value) {
                callback(new Error('两次输入密码不一致'))
            } else {
                callback();
            }
    };
    const validateNewPassword = (rule, value, callback) => {
        // 条件成立：旧密码和新密码相同，给出错误消息提示
        if(this.form.password == value) {
            callback(new Error('旧密码和新密码不能相同'))
        } else {
            callback();
        }
    };
    return {
      form: {
        password: "",
        newPassword: "",
        checkPassword: ""
      },
      
      rules: {
            // 为原始密码指定规则
            password: [
                {
                    // 原始密码必填
                    required: true , 
                    message: '请输入原始密码', 
                    // 失去焦点时进行验证
                    trigger: 'blur'
                },
            ],
            newPassword: [
                {
                    required: true,
                    message: '请输入新密码',
                    trigger: 'blur'
                },{
                    required: true,
                    // 验证新密码： 新密码和旧密码不能相同
                    validator: validateNewPassword,
                    trigger: 'blur'
                }
            ],
            checkPassword:[
                {
                    required: true,
                    message: '请输入确认密码',
                    trigger: 'blur'
                },{
                    required: true,
                    // 验证确认密码： 两次输入的新密码必须相同
                    validator: validateNewPassword2,
                    trigger: 'blur'
                }
            ],

        },
        
      };
     
    },

    computed: {
  userName() {
    return this.$store.state.user.userName;  // 访问 Vuex 中的 userName
  }
},
    methods: {
            /**
             * “重置”按钮click事件绑定的处理函数，重置表单数据
             */
            doRest() {
                this.form = {
                    password: "",
                    newPassword: "",
                    checkPassword: ""};
            },
            /**
             * 提交按钮click事件绑定处理函数，提交表单修改密码
             */
             doSubmit(){
                console.log('ref = ',this.$refs)
                //this.$refs['form'].validate 对整个表单的内容进行验证
                // valid 表示认证的结果
                console.log("axios = " + this.$axios)
                console.log("newPassword:", this.form.newPassword);

                 this.$refs['form'].validate(valid =>{
                    // 条件成立：认证成功
                    if (valid) {
                        this.$axios
                        .post('http://localhost:8091/account/modifyPassword',{
                            "userName": this.userName,//  "admin",//this.$store.state.user.userName, //"admin",//window.localStorage.getItem("userName"),
                            "userPwd": this.form.newPassword,
                            "oldPwd": this.form.password
                        })
                        .then(resp =>{
                            console.log("userName = " + this.userName);
                
                            console.log("newPassword:", this.form.newPassword);
                            console.log("oldPassword:", this.form.password);
                            console.log("Response", resp);  // 打印响应的数据
                            let code = resp.data.code;
                            console.log("modify code === " + code);
                            if (code === 200) {
                                this.$message.success("修改密码成功,请重新登录");
                                this.$router.push('/login')
                            } else {
                                this.$message.error("修改密码失败,原密码错误")
                            }
                        })
                        .catch(err => {
                            console.log("修改密码请求发送失败：",err);
                            this.$message.error("修改密码请求发送失败：",err);
                        })
                        // 无论成功还是失败都清空表单数据
                        this.form = {};
                    }
                });
            }
        }
}
</script>